@charset "utf-8";

@function vw($a){
    @return ( $a / 640 ) * 100vw;
}

header{
    position: absolute;
    top: 0;
    box-sizing: border-box;
    padding-top: vw(19);
    width: 100%;
    height: vw(75);
    .index-header{
        width: 100%;
        height: vw(37);
        box-sizing: border-box;
        padding: 0 vw(28);
        .index-header-left{
            height: 100%;
        }
        .index-header-right{
            height: 100%;
        }
        .index-header-box{
            height: 100%;
            img{
                height: 100%;
            }
        }
        .index-header-center{
            width: vw(339);
            height: 100%;
            margin: 0 auto;
            ul{
                height: 100%;
                font-size: 0;
                 li{
                    width: vw(113);
                    height: 100%;
                    display: inline-block;
                    text-align: center;
                    vertical-align: top;
                    position: relative;
                    #index-header-pic3{
                        margin-top: vw(3);
                        height: vw(26);
                    }
                }
                li::after{
                    position: absolute;
                    left: 0;
                    bottom: vw(-19);
//                  content: "";
                    width: vw(113);
                    border-bottom: vw(3) solid #000000;
                    transform: scaleX(0.3);
                    transition: 0.3s;
                }
                li.header-active::after{
                    content: "";
                    transform: scaleX(1);
                }
                li:hover::after{
                    content: "";
                    transform: scaleX(1);
                }
            }
           
        }
    }
}


section{
    position: absolute;
    top: vw(75);
    bottom: vw(47);
}


.index-carou{
    width: 100%;
    height: vw(300);
    .swiper-container{
        width: 100%;
        height: 100%;
        position: relative;
        .swiper-wrapper{
            width: 100%;
            height: 100%;
            .swiper-slide{
                width: 100%;
                img{
                    width: 100%;
                }
            }
        }
        .index-carou-pg{
            position: absolute;
            bottom: vw(10);
            .swiper-pagination-bullet{
                width: vw(14);
                height: vw(14);
                background: #585858;
            }
            .swiper-pagination-bullet-active{
                background: #FFFFFF;
            }
        }
    }
}

.index-nav{
    width: 100%;
    height: vw(146);
    background: #f2f2f2;
    box-sizing: border-box;
    padding-top: vw(28);
    .index-nav-box{
        width: vw(544);
        height: vw(90);
        margin: 0 auto 0;
        ul{
            width: 100%;
            height: 100%;
            font-size: 0;
        }
        li{
            display: inline-block;
            width: vw(136);
            height: 100%;
            .index-nav-pic{
                box-sizing: border-box;
                height: 100%;
                width: vw(90);
                margin: 0 auto;
                border: #181818 1px solid;
                border-radius: 50%;
                position: relative;
                img{
                    position: absolute;
                    top: -1px;
                    right: -1px;
                    bottom: -1px;
                    left: -1px;
                    margin: auto;
                }
                #index-nav-pic1{
                    height: vw(45);
                }
                #index-nav-pic2{
                    height: vw(51);
                }
                #index-nav-pic3{
                    height: vw(49);
                }
                #index-nav-pic4{
                    height: vw(47);
                }
            }
        }
    }
}

.index-content{
    width: vw(584);
    margin: 0 auto vw(45);
    .index-content-title{
        width: 100%;
        height: vw(50);
        box-sizing: border-box;
        vertical-align: text-top;
        .index-content-title-pic{
            height: vw(29);
            width: vw(40);
            display: inline-block;
            vertical-align: top;
            margin-top: vw(14);
            img{
                height: 100%;
            }
        }
        p{
            display: inline-block;
            vertical-align: top;
            font-size: vw(24);
            line-height: vw(50);
        }
    }
    .index-content-item{
        width: 100%;
        height: vw(120);
        margin-top: vw(6);
        .index-content-item-pic{
            height: 100%;
            width: vw(150);
            img{
                height: 100%;
            }
        }
        .index-content-item-text{
            width: vw(420);
            height: 100%;
            box-sizing: border-box;
            border-bottom: vw(1) solid #a7a7a7;
            .index-content-item-text-left{
                height: vw(119);
                width: vw(360);
                h1{
                    font-size: vw(22);
                    line-height: vw(50);
                    font-weight: normal;
                }
                p{
                    font-size: vw(18);
                    line-height: vw(18);
                    color: #666666;
                }
                .index-content-item-text-left-box{
                    height: vw(19);
                    width: 100%;
                    margin-top: vw(20);
                }
                .index-content-item-text-left-view{
                    height: vw(19);
                    display: inline-block;
                    width: vw(80);
                    margin-right: vw(35);
                    font-size: 0;
                    vertical-align: top;
                    span{
                        vertical-align: middle;
                        font-size: vw(16);
                        color: #999999;
                        line-height: vw(19);
                        margin-left: vw(10);
                    }
                    img{
                        vertical-align: top;
                    }
                    #index-content-item-text-left-pic1{
                        height: vw(16);
                    }
                    #index-content-item-text-left-pic2{
                        height: vw(19);
                    }
                    #index-content-item-text-left-pic3{
                        height: vw(19);
                    }
                }
                .index-content-item-text-left-view:last-of-type{
                    margin-right: 0;
                }
            }
            .index-content-item-text-right{
                width: vw(25);
                height: vw(25);
                margin-top: vw(46);
                img{
                    height: 100%;
                }
            }
        }
    }
}
